<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ page session="true"%>
<%@ include file="dbcon.jsp" %>

<!DOCTYPE html>
<html lang="ko">
<%@include file="topHead.jsp" %>

<body>
<%@include file="topcategory.jsp" %>
<div class="top-tab top-hidden-xs">
	<%@include file="tab.jsp" %>
</div>
	
	<body>
		<div class="top-container top-margin-top-100">
			<div class="top-table-size4">
			<form id="uMemFindPw" class="" role="form" method="post"
				action="uMemFindPwOk.jsp">
				<fieldset>
					<div class="">
						<label for="id" class="top-label1">아이디</label>
						<div class="top-inline-group">
							<input type="text" class="top-input" id="id"
								placeholder="아이디를 입력해주세요." name="id">
						</div>
					</div>
					<div class="">
						<label for="name" class="top-label1">이름</label>
						<div class="top-inline-group">
							<input type="text" class="top-input" id="name"
								placeholder="이름을 입력해주세요." name="name">
						</div>
					</div>
					<div class="">
						<label for="jumin" class="top-label1">주민번호</label>
						<div class="top-inline-group">
							<input type="text" class="top-input" id="jumin" placeholder="주민번호를 입력해주세요." name="jumin">
						</div>
					</div>					
					<div class="">
						<label for="email" class="top-label1">이메일</label>
						<div class="top-inline-group">
							<input type="text" id="email" class="top-input" placeholder="아이디를 받을 이메일 주소" name="email">
						</div>
					</div>					
					<br />
					<div class="">
						<button type="submit" class="top-btn-custom1 top-btn-size4 top-btn-custom">비밀번호찾기</button>
					</div>
				</fieldset>
			</form>
			</div>
			<div class="top-margin-bottom-100"></div>	
		</div>
			
		<div class="top-hidden-xs">
			<%@include file="topBottom.jsp" %>
		</div>

		<!-- 형식검사 클래스 참조 -->
		<script src="assets/js/string.js"></script>
		<!-- 구현 부분 -->
		<script type="text/javascript">
			$(function() {	
				// 디자인된 팝업창을 띄우는 함수
				function popup(str) {
					window.open("defaultPopup.jsp?title=" + str, "POP", "width=250,height=250,scrollbars=no");
				}
				
				$("#uMemFindPw").submit(function() {					
					// 아이디 입력여부 검사
					if (!$("input[name='id']").val().isValue()) {
						popup("아이디를 입력하세요.");
						$("input[name='id']").focus();
						return false;
					}
					 
					// 아이디 유효 검사
					if (!$("input[name='id']").val().isAlphabetNum()) {
						popup("아이디는 영어와 숫자값만 가능합니다.");
						$("input[name='id']").focus();
						return false;
					}
					
					// 이름 입력여부 검사
					if (!$("input[name='name']").val().isValue()) {
						popup("이름을 입력하세요.");
						$("input[name='name']").focus();
						return false;
					}
					
					// 주민번호 입력여부 검사
					if (!$("input[name='jumin']").val().isValue()) {
						popup("주민번호를 입력하세요.");
						$("input[name='jumin']").focus();
						return false;
					}
					
					// 작성된 주민번호 형식 검사
					if (!$("input[name='jumin']").val().isJumin) {
						popup("주민번호가 형식에 맞지 않습니다.");
						$("input[name='jumin']").focus();
						return false;
					}

					// 이메일 입력여부 검사
					if (!$("input[name='email']").val().isValue()) {
						popup("메일주소를 입력하세요.");
						$("input[name='email']").focus();
						return false;
					}
					
					// 작성된 이메일의 형식 검사
					if (!$("input[name='email']").val().isEmail()){
						popup("메일주소가 형식에 맞지 않습니다.");
						$("input[name='email']").focus();
						return false;
					}
				});				
			});
		</script>
	</body>
</html>